<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { Distribution, DistributionObj, getMilkmanDistribution, changeMilkMan } from '@/api/customer'
import { ElMessage } from 'element-plus'
import { getAllMilkman, Milkman } from '@/api/milkman'

const distribution = ref<DistributionObj>({})

const milkMansList = ref<Milkman[]>()

const getMilkmanDistributionInfo = async () => {
  try {
    const milkmanDistribution = await getMilkmanDistribution()
    milkMansList.value = await getAllMilkman()
    distribution.value = Object.values(milkmanDistribution).reduce((pre, cur) => {
      return { ...pre, ...cur }
    }, {})
  } catch (error) {

  }
}

const milkMansDialog = reactive({
  show: false,
  distributionValue: {},
  milkmanId: 1
} as {
  show: boolean,
  distributionValue: Distribution,
  milkmanId: number
})

const showmilkMansDialog = (key: string) => {
  milkMansDialog.distributionValue = distribution.value[key]
  milkMansDialog.milkmanId = milkMansDialog.distributionValue.milkman_id
  milkMansDialog.show = true
}

const getDistributionMan = (milkmanId: number) => milkMansList.value?.find(item => item.id === milkmanId)?.user_name

const setMilkMan = async () => {
  try {
    const { list } = milkMansDialog.distributionValue
    const setCoustomerIdList = list.map(item => item.id)
    await changeMilkMan({ milkmanId: milkMansDialog.milkmanId, setCoustomerIdList })
    ElMessage.success('修改成功')
    await getMilkmanDistributionInfo()
    milkMansDialog.show = false
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

onMounted(async () => {
  await getMilkmanDistributionInfo()
})

</script>
<template>
<div class="milkman-manage">
    <el-card v-for="item in Object.keys(distribution)" :key="item" class="box-card" :body-style="{padding: '0px'}">
    <template #header>
      <div class="card-header">
        <span>{{ item }}</span>
        <el-button type="text" @click="showmilkMansDialog(item)">配送人： {{getDistributionMan(distribution[item].milkman_id)}}</el-button>
      </div>
    </template>
    <div class="customer-body">
      <div v-for="customer in distribution[item].list" :key="customer.id" class="customer-item">
        <el-space class="customer-item-1" direction="horizontal" :size="30">
          <div>客户姓名：<span>{{ customer.name }}</span></div>
          <div>今日需配送：<span>{{ customer.distribution }}</span> 瓶</div>
        </el-space>
        <div class="customer-item-2">订购产品：<span>{{ customer.products_name }}</span></div>
        <div class="customer-item-3">配送地址：<span>{{ customer.address + customer.detailed_address }}</span></div>
      </div>
    </div>
  </el-card>
</div>
<el-dialog
  v-model="milkMansDialog.show"
  title="修改配送人"
  width="30%"
>
  <el-select v-model="milkMansDialog.milkmanId" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in milkMansList"
      :key="item.id"
      :label="item.user_name"
      :value="item.id"
    />
  </el-select>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="milkMansDialog.show = false">取消</el-button>
      <el-button type="primary" @click="setMilkMan"
        >确认修改</el-button
      >
    </span>
  </template>
</el-dialog>
</template>

<style lang="scss" scoped>
.milkman-manage {
  height: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.box-card {
  margin-bottom: 10px;
  margin-right: 10px;
  width: 360px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .customer-body {
    padding: 20px 20px 0 ;
    max-height: 600px;
    overflow-y: auto;
    .customer-item {
      margin-bottom: 10px;
      font-size: 14px;
      color: #4b4b4b;
      border-bottom: 1px solid #eee;
      &-1 {
      }
      &-2 {
        margin-top: 8px;
      }
      &-3 {
        margin: 10px 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
